<%@ page pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://www.ld.com/shield/tags" prefix="shield"%>
<%@ taglib uri="http://www.ld.com/system/tags" prefix="system"%>
<%@ page trimDirectiveWhitespaces="true" %>
<fmt:setLocale value="zh_CN"/>
<!DOCTYPE html>
<html>
<head>
   	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <title>${applicationScope.projectName }</title>
    <link type="text/css" rel="stylesheet" href="${ctxPath }/css/news/common.css?20190911100333" />
    <link type="text/css" rel="stylesheet" href="${ctxPath }/css/usercenter/sysusernote.css?20190723165956" />
</head>
<body style="min-width: 600px;">
<shield:permssion type="button">
	<shield:token/>
	<div class="123">
		<ul class="description">
			<li >便签在数据库中以加密方式保存，无需担心隐私泄露；</li>
			<li >点击右上方的蓝色+按钮，可以在页面中添加一个便签,用户可以在便签中输入需要记录的文字；</li>
			<li >点击便签左上方的保存按钮，便签里的内容以及便签的位置可以通过回调函数持久化到文件或数据库；</li>
			<li >点击便签右上方的关闭按钮可以关闭便签；</li>
			<li >按住便签上方的胶带，可以在屏幕上拖拽便签（注意保存）；</li>
			<li >按住便签右部和底部的边框，可以对便签进行缩放改变大小（注意保存）；</li>
			<li >目前便签最多保存10个。</li>
		</ul>
	    <script type="text/javascript" src="${ctxPath }/js/lib/jquery-1.12.4.min.js?20190117152252"></script>
	    <!-- 适用浏览器：搜狗、360、FireFox、Chrome、Safari、Opera、傲游、世界之窗，不支持IE8及以下浏览器 -->
	    <link rel="stylesheet" type="text/css" href="${ctxPath }/js/lib/colorsticker/css/color-sticker.css?20190704164058">
		<script type="text/javascript" src="${ctxPath }/js/lib/colorsticker/js/colorsticker.js?20190812100435"></script>
		<script type="text/javascript" src="${ctxPath }/webjars/shieldjs/core/shield.util.js"></script>
		<script>
		//$('body').sticker(); //采用默认配置引入便签插件，页面加载后，页面右上方会出现添加便签的按钮
		// 参考 file:///C:/Users/kevin/AppData/Local/Temp/HZ$D.016.332/HZ$D.016.333/color-sticker/index.html
		var data = [];
		parent.ShieldJS.ajax.post("${ctxPath}/a/usercenter/sysusernote/search", {}, function(json) {
			if(json.success){
				data = json.data;
			}
			$('body').sticker({
				color:'blue', //便签默认是黄色，可以选择pink,green,blue,purple
				width:'300px', //便签的宽度，默认是200px
				height:'300px', //便签的高度，默认是200px
				saveStickerCallback : function(sticker){ //保存便签的回调方法，参数是sticker对象，包括便签的位置和内容信息
					var params = {};
					var url = "${ctxPath}/a/usercenter/sysusernote/addOrUpdate";
					params.id = sticker.stickerId;
					params.leftv = sticker.left;
					params.topv = sticker.top;
					params.content = sticker.content;
					params.width = $(this).parent(".sticker ").width()+"px";
					params.height = $(this).parent(".sticker ").height()+"px";
					parent.ShieldJS.ajax.post(url, params, function(json) {
		        	}, function(json) {
		        		parent.ShieldJS.debug("提交数据出错！" + url + " params: " + $.param(params));
		        	}, "json");
				},
				closeSticker : function(stickerId, ele){ //自定义删除便签的方法，参数是便签的stickerId
					parent.ShieldJS.confirm("确认信息", "确定要删除这条便签吗？", function(){
						if(stickerId){
							ele.remove();
							parent.ShieldJS.ajax.post("${ctxPath}/a/usercenter/sysusernote/del", {id:stickerId}, function(json) {
				        	}, function(json) {
				        		parent.ShieldJS.debug("提交数据出错！" + url + " params: " + $.param(params));
				        	}, "json");
						} else { //未保存
							ele.remove();
						}
					});
				}
			}, data);
		}, function(json) {
			parent.ShieldJS.debug("提交数据出错！" + url + " params: " + $.param(params));
		}, "json");
		</script>
	</div>
</shield:permssion>
</body>
</html>
